.album-info {
  display: flex;
  justify-content: space-between;
  .main {
    width: 800px;
    .info {
      display: flex;
      justify-content: space-between;
      padding-bottom: 30px;
      margin-bottom: 30px;
      border-bottom: 1px solid #e8e8e8;
      .thumbnail {
        display: flex;
        .cover {
          width: 182px;
          height: 182px;
          border-radius: 4px;
        }
        .back-cover {
          width: 30px;
          height: 182px;
          left: 182px;
          background: url(//s1.xmcdn.com/yx/ximalaya-web-static/last/dist/images/cover-right_dd0ab25.png) no-repeat;
        }
      }
      .contents {
        width: 520px;
        h1 {
          font-size: 20px;
          .tag {
            font-size: 14px;
            vertical-align: top;
            margin-right: 4px;
            font-weight: normal;
          }
        }
        .record {
          display: flex;
          align-items: center;
          margin: 14px 0 10px;
          .rate {
            display: flex;
            align-items: center;
            color: #f5a623;
            margin-right: 16px;
            .star-wrap {
              width: 120px;
              margin-right: 10px;
            }
          }
          .play-count {
            color: #666;
            .icon {
              font-size: 22px;
              vertical-align: sub;
            }
          }
        }
        .metas {
          .meta {
            font-size: 14px;
            margin-right: 14px;
            margin-bottom: 8px;
            color: #72727b;
            &:hover {
              color: #f86442;
              border-color: #f86442;
            }
          }
        }
        .actions {
          margin-top: 30px;
          .btn {
            .icon {
              font-size: 22px;
              vertical-align: sub;
            }
          }
        }
      }
    }
    .intro {
      position: relative;
      article {
        max-height: 360px;
        overflow-y: hidden;
        transition: max-height .3s ease-in-out;
      }
      .more-arrow {
        position: relative;
        padding-top: 20px;
        text-align: center;
        color: #a3a3ac;
        font-size: 12px;
        letter-spacing: 1.2px;
        cursor: pointer;
        user-select: none;
        .blur {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: -100px;
          height: 100px;
          background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0,#fff 100%);
        }
        .icon {
          font-size: 24px;
          vertical-align: sub;
        }
      }
    }
    .playlist {
      margin-top: 20px;
      table {
        width: 100%;
        text-align: center;
        tr {
          height: 36px;
          &:last-child {
            height: 10px;
          }
        }
        thead, tfoot {
          .item-name {
            text-align: left;
            .btn-add {
              margin-left: 6px;
            }
          }
        }
        thead {
          tr {
            height: 40px;
          }
        }
        tbody {
          .item-name {
            text-align: left;
            cursor: pointer;
            &:hover {
              .number {
                display: none;
              }
              .icon-play {
                display: inline-block;
              }
            }
            .prefix {
              display: inline-block;
              width: 20px;
              height: 24px;
              margin-right: 10px;
            }
            .icon {
              display: none;
              color: #f86442;
            }
            .icon-playing {
              color: #f86442;
              i {
                display: inline-block;
                width: 2px;
                height: 16px;
                margin-right: 4px;
                border-radius: 6px;
                background-color: #f86442;
                animation: is-playing .5s ease infinite alternate;
                transform-origin: bottom;
                @for $i from 1 through 4 {
                  &:nth-child(#{$i}) {
                    animation-delay: 0.15s * $i;
                    @if $i == 4 {
                      margin-right: 0;
                    }
                  }
                }
                /*&:first-child {
                  animation-delay: .15s;
                }
                &:nth-child(2) {
                  animation-delay: .3s;
                }
                &:nth-child(3) {
                  animation-delay: .45s;
                }
                &:last-child {
                  animation-delay: .6s;
                  margin-right: 0;
                }*/
              }
            }
          }
          .item-name-playing {
            &:hover {
              .icon-playing, .icon-play {
                display: none;
              }
              .icon-pause {
                display: inline-block;
              }
            }
            .number {
              display: none;
            }
            .icon {
              display: none;
              color: #f86442;
            }
            .icon-playing {
              display: inline-block;
            }
          }

          .item-name-pause {
            &:hover {
              .icon-playing, .icon-pause {
                display: none;
              }
            }
            .number {
              display: none;
            }
            .icon {
              display: none;
              color: #f86442;
            }
            .icon-play {
              display: inline-block;
            }
          }
        }
      }
      .page-wrap {
        padding: 30px 0;
      }
    }
  }
  .side {
    width: 260px;
    .card {
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0;
      }
      .card-head {
        font-size: 16px;
        padding: 10px 0;
        margin-bottom: 12px;
        border-bottom: 1px solid #e8e8e8;
      }
      .card-body {
        .anchor-info {
          .anchor-head {
            display: flex;
            align-items: center;
            .photo {
              width: 40px;
              height: 40px;
              margin-right: 8px;
              img {
                border-radius: 50%;
              }
            }
          }
          .anchor-stats {
            display: flex;
            align-items: center;
            margin: 10px 0;
            li {
              margin-right: 8px;
              &:last-child {
                margin-right: 0;
              }
            }
          }
          .anchor-intro {
            color: #a3a3ac;
            font-size: 12px;
            line-height: 1.4;
          }
        }
        .albums {
          .album-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
            border-bottom: 1px dashed #e8e8e8;
            &:last-child {
              border-bottom: none;
            }
            .thumbnail {
              width: 60px;
              min-width: 60px;
              height: 60px;
              margin-right: 12px;
            }
            .content {
              line-height: 1.4;
              .title {
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                /* opera 专属 */
                text-overflow: -o-ellipsis-lastline;
                max-height: 40px;
                overflow: hidden;
                color: #40404c;
                font-size: 14px;
                font-weight: 400;
                margin-bottom: 3px;
              }
              .count, .anchor {
                font-size: 12px;
                color: #a3a3ac;
              }
            }
          }
        }
      }
    }
  }
}


@keyframes is-playing {
  0% {
    transform: scaleY(.2);
  }

  100% {
    transform: scaleY(1);
  }
}
